package com.lml.composetutorial

import SampleData
import android.content.res.Configuration
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.lml.composetutorial.ui.theme.ComposeTutorialTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeTutorialTheme {
                // fillMaxSize()会让UI元素填充父容器的整个可用空间，沿着它的宽度和高度。
                // 这可以确保UI元素充分利用其父容器的可用空间，使其大小适应屏幕或父容器的尺寸。
                // Surface是一个基本的容器元素，用于包裹其他UI元素，并为其提供背景、阴影以及触摸反馈等效果。
                // Surface元素可用于创建可视化的容器，以展示应用程序中的各种内容。
//                Surface(modifier = Modifier.fillMaxSize()) {
//                    MessageCard(Message("Android", "Jetpack Compose"))
//                }
                Conversation(SampleData.conversationSample)
            }
        }
    }
}

data class Message(val author: String, val body: String)

@Composable
fun MessageCard(msg: Message) {
    // Modifier修改符
    // Modifier.padding(all = 8.dp)使界面元素上下左右都有8dp的内间距
    Row(modifier = Modifier.padding(all = 8.dp)) {//使界面元素水平排列
        Image(
            painter = painterResource(id = R.drawable.profile_picture),
            contentDescription = "Contact Profile picture",
            // 将Image大小设置成40dp,裁剪成圆形,同时添加一个1.5dp宽度,颜色为默认主题配色方案中的主色的圆形边框
            modifier = Modifier
                .size(40.dp)
                .clip(CircleShape)
                .border(1.5.dp, MaterialTheme.colorScheme.primary, CircleShape)
        )
        // Spacer组件用于在布局中创建空白空间
        Spacer(
            modifier = Modifier
                .width(8.dp)
        )

        // remember和mutableStateOf是Compose中用于管理状态的工具
        // mutableStateOf 是Compose中用于创建可变（mutable）状态的函数。
        // 它返回一个包含状态值的MutableState对象，该对象可以被读取和修改。
        // 在这里，mutableStateOf(false)创建了一个初始值为false的可变状态对象。
        // by remember 是一种属性委托语法，它将属性的读取和写入委托给另一个对象。
        // 在这里，isExpanded 属性被委托给了通过 mutableStateOf 创建的可变状态对象。
        // 这意味着你可以通过读取和写入 isExpanded 属性来访问和修改状态。
        // 总体来说，这段代码创建了一个名为 isExpanded 的可变状态属性，初始值为 false。
        // 这种模式在Compose中常用于跟踪UI元素的展开或折叠状态，例如折叠列表项或展开详细信息。
        // 通过修改 isExpanded 属性的值，可以触发UI的重新绘制，以反映状态的变化
        var isExpanded by remember {
            mutableStateOf(false)
        }

        Column(modifier = Modifier.clickable { isExpanded = !isExpanded }) {//使界面元素垂直排列
            Text(
                text = msg.author,
                // 设置文本颜色为默认主题配色方案中次要色
                color = MaterialTheme.colorScheme.secondary,
                style = MaterialTheme.typography.titleSmall
            )
            Spacer(modifier = Modifier.height(4.dp))
            // 通过shape属性，可以指定Surface的形状，如矩形、圆角矩形等。
            // Surface支持添加阴影效果，通过elevation属性来设置。
            Surface(shape = MaterialTheme.shapes.medium, shadowElevation = 1.dp) {
                Text(
                    text = msg.body,
                    modifier = Modifier.padding(all = 4.dp),
                    // maxLines 被设置为一个条件表达式，该表达式检查 isExpanded 的值。
                    // 如果 isExpanded 为 true，则 maxLines 被设置为 Int.MAX_VALUE，
                    // 这表示文本将占据尽可能多的行数，没有行数的限制。如果 isExpanded 为 false，
                    // 则 maxLines 被设置为 1，文本将被限制在一行。
                    // Int.MAX_VALUE 是 Kotlin 中 Int 类型的最大值。
                    // 在32位有符号整数表示中，Int.MAX_VALUE 的值为 2^31 - 1，即 2147483647。
                    // 当 maxLines 被设置为 Int.MAX_VALUE 时，这表示对文本行数没有明确的限制。
                    // 它可以用于指定一个足够大的值，以确保文本可以展示在足够多的行上 ，
                    // 即文本不会因为行数限制而被截断。这在需要展示可变行数文本内容的情况下很有用，
                    // 例如当你希望文本内容可以展开显示时。
                    maxLines = if (isExpanded) Int.MAX_VALUE else 1,
                    style = MaterialTheme.typography.bodyMedium
                )
            }
        }
    }
}

@Composable
fun Conversation(messages: List<Message>) {
    // LazyColumn 是一个用于显示垂直列表的组件。与传统的RecyclerView不同，
    // LazyColumn 是一种懒加载（Lazy）的方式,只会加载当前可见范围内的项目，而不是一次性加载整个列表
    LazyColumn {
        // items 函数用于定义要在列表中显示的项目。它接受一个项目的数量和一个lambda表达式，该表达式定义了每个项目的内容。
        items(messages) { message ->
            MessageCard(message)
        }
    }
}

@Preview
@Composable
fun PreviewConversation() {
    ComposeTutorialTheme {
        Conversation(SampleData.conversationSample)
    }
}


@Preview(name = "Light Mode")
@Preview(
    uiMode = Configuration.UI_MODE_NIGHT_YES,// 表示预览将使用夜间模式
    showBackground = true,//在预览中显示背景
    name = "Dark Mode"// 这个名称将在Compose工具中显示，用于标识该预览。在这里，它被命名为"Dark Mode"，以指示预览的主题。
)
@Composable
fun PreviewMessageCard() {
    ComposeTutorialTheme {
        Surface {
            MessageCard(
                msg = Message(
                    "Lexi",
                    "take a look at Jetpack Compose,it's great!"
                )
            )
        }
    }
}